import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
// import Test from './state/test';
// 评论案例
import Commit from './test/eg.js';
import reportWebVitals from './reportWebVitals';

// 父子组件传值
import FatherSon from './props/index';
// 兄弟组件传值
import Brothers from './props/brothers';

// Context
import ContextBox from './Context/index';

import Father from './props/children';
import Checking from './props/check';

// 生命周期
import HookFun from './HookFunction/smzq';

//render props 高阶组件 
import RenPro from './render_props/index';

// 高阶组件
import HeightRender from './render_props/highOrder';

import TestState from './state/setState';


// ------------------
// 创建组件
function Hellow() {
  return (
    <div>您好世界</div>
  )
}

// 创建类组件

// class Person extends React.Component{
//   handleClick(){
//     console.log("出发世家")
//   }
//   handleA(e){
//     e.preventDefault();//组织浏览器默认行为
//     console.log("不跳转")
//   }
//   render(){
//     return (
//       <div>
//       <div onClick={this.handleClick}>这个是个person组件</div>
//       <a href="http://baidu.com" onClick={this.handleA}>点击我不跳转</a>
//       </div>
//     )
//   }
// }
/* <App />
    <Test />
    <Hellow />
    <Person></Person> */

// 测试props 
// 1.使用普通构造函数
// function Happy(props){
//   console.log(props);
//   return (
//     <div>
//       <h1>props</h1>
//     </div>
//   )
// }
// 2.使用类
class Happy extends React.Component {
  render() {
    console.log(this.props)
    return (
      <div>
        <h1>类组件</h1>
      </div>
    )
  }
}


ReactDOM.render(
  <React.StrictMode>
    <Hellow></Hellow>
    <Commit></Commit>
    <Happy name="lkx"></Happy>
    <FatherSon></FatherSon>
    <Brothers></Brothers>
    <ContextBox></ContextBox>
    <Father></Father>
    <Checking></Checking>
    <HookFun></HookFun>
    <RenPro></RenPro>
    <HeightRender></HeightRender>
    <TestState></TestState>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
